<template>
    <div class="container">
        <div class="law-box hide-in-mobile">
            <div class="law-container first-level clearfix">
                <div class="box-title fst-title">
                    <Icon type="arrow-right-b"></Icon>
                    所有分类
                </div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" 
                        @click="getChild(item.id,item.children,item.depth); 
                                getThis(item.id);" 
                        :key="item.id" 
                        v-for="item in categoryList">{{item.name}}</a>
                    <a :class="{'is-active':selectedContainer.length == 0}" @click="initNewest()">最新法规</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title">
                    机构名称
                </div>
                <div name="fade" class="box-content" tag="div">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" 
                        @click="getChild(item.id,item.children,item.depth); 
                                getThis(item.id); " 
                        :key="item.id" 
                        v-for="item in categoryList1">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title"></div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" 
                        @click="getChild(item.id,item.children,item.depth); 
                                getThis(item.id); " 
                        :key="item.id" 
                        v-for="item in categoryList2">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title"></div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" 
                        @click="getChild(item.id,item.children,item.depth); 
                                getThis(item.id);" 
                        :key="item.id" 
                        v-for="item in categoryList3">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title">备注</div>
                <div class="box-content">
                    <span>{{finalSelected.content || '暂无简介'}}</span>
                </div>
            </div>
        </div>
        <div class="main-list">
            <div class="list-item clearfix" v-for="statute in table.list">
                <div class="title">
                    <span>{{statute.name}}</span>
                    <span class="date">
                        <i class="day">发布日期：{{statute.inTimes}}</i>
                    </span>
                    <Tag color="blue" v-if="statute.statute_level == 1">免费</Tag>
                    <Tag color="red" v-if="statute.statute_level == 2">VIP</Tag>
                    <Tag color="green" v-if="statute.statute_level == 3">我要翻译</Tag>
                    <Tag color="blue" v-if="statute.newCategory">New</Tag>
                </div>
                <div class="list-left">
                    <span class="icon"><img src="../../assets/images/icon/statute.png" alt="" /></span>
                </div>
                <a class="read" :href="'/statute-content?q='+statute.id"><span>阅读</span></a>
            </div>
            <!-- <div class="list-item clearfix" :key="statute.id" v-if="table.list.length != 0" v-for="statute in table.list">
                <div class="statute-left">
                    <span class="date">{{statute.date}}</span>
                    <span class="year-month">{{statute.year_month}}</span>
                </div>
                <div class="statute-right">
                    <div class="title ellipsis">
                        {{statute.name}}
                    </div>
                    <p class="type">分类：法律法规</p>
                    <p class="download-count">下载次数：{{statute.number.download}}</p>
                    <router-link :to="{path:'/statute-content',query:{q:statute.id}}" class="read hide-in-mobile">阅读</router-link>
                </div>
                <router-link :to="{path:'/statute-content',query:{q:statute.id}}" class="link-in-mobile show-in-mobile"></router-link>
            </div> -->
            <Page class="pagination"
                :current="table.page"
                :total="table.total"
                :page-size="table.size"
                @on-change="handlePage"
                size="small"
                v-if="table.list.length != 0">
            </Page>
            <div class="no-more" v-if="table.list.length == 0">
                暂无相关文章
            </div>
        </div>
    </div>
</template>
<script>
    import { format,clone } from '../../utils/utils.js';
    export default{
        data(){
            return{
                q:this.$route.query.q || [],
                s:this.$route.query.s || '',//关键词
                selectedContainer:[],
                categoryList1:[],
                categoryList2:[],
                categoryList3:[],
                categoryList4:[],
                finalSelected:{},
                table:{
                    list:[],
                    size:15,
                    page:1,
                    total:0
                },
                tempArr:[],
                tempCategoryId:''
            }
        },
        computed:{
            categoryList(){
                return this.$store.state.lawData.children;
            },
            categoryDepth(){
                return this.$store.state.lawData.depth;
            }
        },
        mounted(){
            if(this.q && this.q.length != 0){
                this.q = this.$route.query.q.split('|');
                this.initList(this.q.pop());
                var timeout = setTimeout(_=>{
                    if(this.categoryList){
                        this.tempArr = clone(this.categoryList);
                        this.initLevel();
                    }
                },1000)
            }else if(this.s){
                this.initByKeyword();
            }
        },
        watch:{
            $route(){
                if(this.$route.query.q){
                    this.q = this.$route.query.q.split('|');
                }
                this.s = this.$route.query.s;
                if(this.s){
                    this.initByKeyword();
                }else if(this.q.length != 0){
                    this.initList(this.q.pop());
                }
            }
        },
        methods:{
            getChild(id,children,depth){
                this.selectedContainer[depth] = id;
                var next = `categoryList${depth+1}`;
                if(children){
                    this[next] = children;
                    for(let x = depth+1; x < this.categoryDepth; x++){
                        var n = `categoryList${x+1}`;
                        this[n] = [];
                    }
                }else{
                    for(let x = depth; x < this.categoryDepth; x++){
                        this.selectedContainer.splice(x+1,this.selectedContainer.length-x+1);
                        var n = `categoryList${x+1}`;
                        this[n] = [];
                    }
                    // this.$router.push({path:'/statute',query:{q:this.selectedContainer.join('|')}});
                }
                this.$router.push({path:'/statute',query:{q:this.selectedContainer.join('|')}});
            },
            initLevel(){
                this.q.forEach((item,index)=>{
                    this.tempArr.forEach((child,childIndex)=>{
                        if(item == child.id){
                            this.tempArr = child.children;
                            this.getChild(item,this.tempArr,index);
                        }
                    });
                    if(this.q.length == index + 1){
                        this.getThis(item);
                    }
                })
            },
            getThis(id){
                this.$http.get('/category/' + id + '/getList',{
                    params:{
                        fe:1
                    }
                }).then(response => {
                    const data = response.data;
                    this.finalSelected = data.onThis;
                }).catch(err => {

                })
            },
            initNewest(){
                this.selectedContainer = []; 
                this.categoryList1 = [];
                this.categoryList2 = [];
                this.categoryList3 = [];
                this.categoryList4 = [];
                this.$router.push('/statute');
                this.initList(0);
            },
            initByKeyword(){
                this.$http.post('/searchStatute',{
                    keyword:this.s,
                })
                .then(response=>{
                    var data = response.data;
                    this.table.list = data.data;
                    this.table.page = data.meta.pagination.current_page;
                    this.table.total = data.meta.pagination.total;
                })
                .catch(err=>{

                })
            },
            initList(id){
                if(!isNaN(id) && id == 0){
                    this.tempCategoryId = ''
                }else{
                    this.tempCategoryId = id || this.tempCategoryId;
                }
                this.$http.get('/statute/list',{
                    params: {
                        category:this.tempCategoryId,
                        fe:1,
                        page:this.table.page,
                        size:this.table.size,
                    }
                }).then(response => {
                    var data = response.data;
                    this.table.list = data.data;
                    if(!this.tempCategoryId){
                        this.table.list.forEach((item,index)=>{
                            item.newCategory = true;
                        })
                    }
                    this.table.page = data.meta.pagination.current_page;
                    this.table.total = data.meta.pagination.total;
                    
                    
                }).catch(err => {

                })
            },
            handlePage(val){
                this.table.page = val;
                this.initList();
            },
        }
    }
</script>
<style type="text/css" scoped>
    .container{ max-width:1200px; margin:16px auto;}
    .law-box{ border:1px solid #cdcdcd;}
    .law-container{ background:#fff; border-bottom:1px dashed #cdcdcd; background:#f7f7f7;}
    .law-container:last-of-type{ border-bottom:none;}
    .first-level{ background:#eee; border-bottom:1px solid #cdcdcd;}
    .box-title{ width:150px; text-align:center; padding:17px 0; float: left;}
    .fst-title{ border-right:1px solid #cdcdcd; background:#eee;}
    .fst-title .ivu-icon{ color:#b6b6b6; margin-right:5px;}
    .box-content{ margin-left:150px; padding-top:17px; background:#fff; min-height: 49px;}
    .box-content a,.box-content span{  margin:0 24px; margin-bottom: 17px; display:inline-block;}
    .box-content a:hover,.box-content a.is-active{ color:#0f977f;}
    .main-list{ margin-top:50px; }
    .list-item{ margin:0 95px 50px; position: relative; border-bottom:1px solid #ccc; padding-bottom:20px;}
    .list-item span{ display:inline-block;}
    .list-item span.icon img{ width:100%; }
    
    .list-item .title{ vertical-align:top; font-size:16px; width:100%; float:left;}
    .list-item .title span:first-child{ width:100%; padding-left:70px; padding-right:170px; line-height:22px; min-height: 44px;}
    .list-item .date{  padding-left:70px; font-size:12px; color:#999;}
    .list-item .date .day{ font-style: normal;}
    .list-left{ float:left; margin-left:-100%;}
    .read{ width:160px; height:32px; float:left; margin-left:-160px; border:1px solid #666; border-radius:3px; display:flex; align-items:center; justify-content:center; color:#666; transition:all 0.2s linear; margin-top:24px;}
    .read:hover,.read.is-active{ background:#15ccac; color:#fff; border-color:#15ccac; }
    /*.statute-left{ background:url('../../assets/images/icon/statute.png') no-repeat; padding-top:60px; width:50px; float: left;}
    .date,.year-month{ display:block; text-align:center; color:#15ccac;}
    .date{ font-size:40px; margin:5px 0;}
    .year-month{ font-size:12px; }
    .statute-right{ margin-left:50px; padding-left:46px; padding-bottom: 50px; border-bottom:1px solid #666;}
    .title{ font-size:18px; letter-spacing:0.01rem;}
    .type,.download-count{ font-size:12px; color:#666; margin-top:12px;}
     */
    @media (max-width:1024px){
        .hide-in-mobile{ display:none;}
        .main-list{ margin-top:10px;}
        .list-item{ margin:0 40px 30px;}
        .list-item .icon{ width:30px;}
        /* .date{ margin-left:10px;} */
        .list-item .title{ font-size:14px;}
        .list-item .title span{ padding-right:10px;}
        .list-item .title span:first-child{ padding-right: 0;}
        /* .date i.day{ font-size:20px; margin-bottom:2px; } */
        .read{ position: absolute; width:100%; height:100%; border:0; top:0; margin:0; }
        .read:hover{ background:none; }
        .read span{ display:none; }
    }
    @media (max-width: 768px){
        .list-item{ margin:0 20px 20px;}
    }
    .no-more{ text-align:center; color:#999; }
</style>